<template>
  <view class="container">
    <!-- 表单区域 -->
    <view class="form-container">

      <uni-section title="环节名称" type="line" padding>
				<uni-easyinput class="item-input" type="text" placeholder="请输入环节名称" v-model="form.linkName">
				</uni-easyinput>
      </uni-section>

      <uni-section title="选择工人" type="line" padding>
				<UserInfo :userApplyId="userGrId" @changeSelectUseId="getGrUserIds"></UserInfo>
      </uni-section>
			
			<uni-section title="选择审批人" type="line" padding>
				<UserInfo :userApplyId="userApplyId" @changeSelectUseId="getApplyUserIds"></UserInfo>
			</uni-section>

<!--      <uni-section title="附件" type="line">
        <view class="example-body">
          <uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
        </view>
      </uni-section> -->

      <uni-section title="备注" type="line" padding>
        <uni-easyinput type="textarea" class="item-textarea" placeholder="请输入" v-model="form.description"></uni-easyinput>
      </uni-section>
      
      <button class="submit-btn" @click="submitForm">提交环节</button>
    </view>
  </view>

 
</template>

<script>
import request from '/utils/request.js';
import UserInfo from '/components/UserInfo.vue'
import { isEmpty } from '/utils/utils.js'

export default {
	components: {
		UserInfo
	},
  data() {
    return {
      workOrderTypes: ['设备维修', '系统故障', '咨询建议', '其他问题'],
      workOrderType: '请选择环节类型',
      images: [],

			userApplyId: [], // 审批人ID
			userGrId: [],  // 工人ID
			form: {
				linkName: '',
				description: '',
			},
			linkList: [],// 环节字典
			mode: 'add', // 当前模式：add（新增）、view（查看）、edit（编辑）
			isEditMode: false, // 是否处于编辑模式
			isDetailMode: false, // 是否处于详情模式（查看或编辑）
			id: '',
    }
  },
  computed: {
  },
	onLoad(options) {
		// 根据路由参数判断页面模式
		if (options.id) {
			// 有id参数，进入详情模式
			this.mode = 'edit';
			this.isDetailMode = true;
			this.loadData(options.id);
			this.setPageTitle('环节详情');
			this.id = options.id
		} else {
			// 无id参数，进入新增模式
			this.mode = 'add';
			this.isEditMode = true;
			this.setPageTitle('新增环节');
		}
	},
	mounted() {
		// this.getLinkList()
	},
  methods: {
		setPageTitle(title) {
			uni.setNavigationBarTitle({
				title: title
			});
		},
		loadData(id) {
			request.get(`/system/link/${id}`).then(res => {
			  uni.hideLoading()
			  if (res.code === 200) {
					this.userApplyId = res.data.auditor.split(',')
					this.userGrId = res.data.assignEmployees.split(',')
					this.form.linkName = res.data.linkName
					this.form.description = res.data.remark
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: 'none'
			    })
			  }
			})
		},
		getLinkList() {
			request.get('/system/link/allList').then(res => {
			  uni.hideLoading()
			  if (res.code === 200) {
			    this.linkList = [...res.data]
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: 'none'
			    })
			  }
			})
		},
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 选择环节类型
    onTypeChange(e) {
      this.workOrderType = this.workOrderTypes[e.detail.value]
    },
    
    // 提交表单
    submitForm() {
      // 表单验证
      if (isEmpty(this.form.linkName)) {
        uni.showToast({
          title: '请输入环节名称',
          icon: 'none'
        })
        return
      }
			
			if (isEmpty(this.userApplyId)) {
			  uni.showToast({
			    title: '请选择至少一个审批人',
			    icon: 'none'
			  })
			  return
			}
			
			if (isEmpty(this.userGrId)) {
			  uni.showToast({
			    title: '请选择至少一个环节工人',
			    icon: 'none'
			  })
			  return
			}
      
      if (isEmpty(this.form.description)) {
        uni.showToast({
          title: '请填写问题描述',
          icon: 'none'
        })
        return
      }

      // 提交表单逻辑
      uni.showLoading({
        title: '提交中...'
      })

      let params = {
        linkName: this.form.linkName,
        auditor: this.userApplyId.join(','), // 逗号分割
        assignEmployees: this.userGrId.join(','), // 逗号分割
        remark: this.form.description
      }
			
			if (this.mode == 'edit') {
				params.id = this.id
				request.put('/system/link', params).then(res => {
				  uni.hideLoading()
				  if (res.code === 200) {
						uni.showToast({
						  title: '操作成功',
						  icon: 'success',
						  duration: 1500, // 显示2秒
						});
						this.isSubmit = true
						// 等待提示框显示完成后再跳转
						setTimeout(() => {
						  uni.switchTab({
						    url: `/pages/tabBar/index/index`
						  });
						}, 1500);
				  //   uni.showToast({
				  //     title: '修改成功',
				  //     icon: 'success'
				  //   })
						// // 跳转到环节列表页
						// uni.navigateTo({
						//   url: `/pages/workorder/progress`
						// })
				  } else {
				    uni.showToast({
				      title: res.msg,
				      icon: 'none'
				    })
				  }
				})
				
				return 
			}
      request.post('/system/link', params).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
     //      uni.showToast({
     //        title: '提交成功',
     //        icon: 'success'
     //      })
					// // 跳转到环节列表页
					// uni.navigateTo({
					//   url: `/pages/workorder/progress`
					// })
					uni.showToast({
					  title: '操作成功',
					  icon: 'success',
					  duration: 1500, // 显示2秒
					});
					this.isSubmit = true
					// 等待提示框显示完成后再跳转
					setTimeout(() => {
					  uni.switchTab({
					    url: `/pages/tabBar/index/index`
					  });
					}, 1500);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
      
    },

		getApplyUserIds(ids) {
			// 审批人id
			this.userApplyId = ids
		},
		getGrUserIds(ids) {
			// 工人id
			this.userGrId = ids
		}
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

/* 导航栏样式 */
.navbar {
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.navbar-back {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 24rpx;
  height: 40rpx;
}

.navbar-title {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}

/* 表单区域 */
.form-container {
  padding: 30rpx;
}

.form-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.item-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #666;
  height: 60rpx;
}

.picker-arrow {
  width: 24rpx;
  height: 24rpx;
}

.item-textarea {
  font-size: 28rpx;
  min-height: 180rpx;
  padding: 10rpx 0;
  color: #666;
}

.upload-container {
  display: flex;
  flex-wrap: wrap;
}

.upload-btn {
  width: 140rpx;
  height: 140rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.upload-icon {
  width: 60rpx;
  height: 60rpx;
}

.image-preview {
  position: relative;
  width: 140rpx;
  height: 140rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon {
  width: 24rpx;
  height: 24rpx;
}

.item-input {
  font-size: 28rpx;
  height: 60rpx;
  color: #666;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 50rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
}

</style>    